<template>
  <app-header></app-header>
  <div class="content clearfix">
    <!--排行榜-->
    <ul class="rank-list">
      <li v-for="(rank,index) in rankList" :key="index"> <!--用索引做标识--->
        <img src="@/assets/image/list-rank1.png" v-if="index === 0">
        <img src="@/assets/image/list-rank2.png" v-else-if="index === 1">
        <img src="@/assets/image/list-rank3.png" v-else>
        <p class="rank-list-phone">{{ rank.phone }}</p>
        <span>{{ rank.bigDecimal }}元</span>
      </li>
    </ul>
    <!--产品列表-->
    <ul class="preferred-select clearfix">
      <li v-for="product in productList" :key="product.id">
        <h3 class="preferred-select-title">
          <span>{{ product.productName }}</span>
          <img src="@/assets/image/1-bg1.jpg" alt="">
        </h3>
        <div class="preferred-select-number">
          <p><b>{{ product.rate }}</b>%</p>
          <span>历史年化收益率</span>
        </div>
        <div class="preferred-select-date">
          <div>
            <span>投资周期</span>
            <p><b>{{ product.cycle }}</b>个月</p>
          </div>
          <div>
            <span>余利可投资金额</span>
            <p><b>{{ product.leftProductMoney }}</b>元</p>
          </div>
        </div>
        <p class="preferred-select-txt">
          优选计划项目，投资回报周期{{ product.cycle }}个月，起点低，适合短期资金周转、对流动性要求高的投资人。
        </p>
        <a href="javascript:;" @click="goLink('/product/details',{productId:product.id})" class="preferred-select-btn">立即投资</a>
      </li>
    </ul>

    <!--分页-->
    <div class="page_box">
      <ul class="pagination">
        <li class="disabled"><a href="javascript:void (0)" @click="firstPage">首页</a></li>
        <li><a href="javascript:void (0)" @click="prePage">上一页</a></li>
        <li class="active"><span>{{ pageInfo.pageNo }}</span></li>
        <li><a href="javascript:void (0)" @click="nextPage">下一页</a></li>
        <li><a href="javascript:void (0)" @click="lastPage">尾页</a></li>
        <li class="totalPages"><span>共{{ pageInfo.totalPage }}页</span></li>
      </ul>
    </div>

  </div>
  <app-footer></app-footer>

</template>

<script>
import AppHeader from "@/components/AppHeader";
import AppFooter from "@/components/AppFooter";
import {doGet} from "@/utils/request";

export default {
  name: "productListView",
  components: {
    AppHeader,
    AppFooter,
  },

  data() {
    return {
      productType: -1,
      productList: [
        {
          id: 0,
          productName: "",
          rate: 0,
          cycle: 0,
          productType: 0,
          productNo: "",
          productMoney: 0,
          leftProductMoney: 0,
          bidMinLimit: 0,
          bidMaxLimit: 0
        }
      ],
      pageInfo: {
        pageNo: 1,
        totalPage: 0,
      },
      rankList: [{
        phone: "",
        bigDecimal: 0,
      }],

    }
  },
  mounted() {
    this.productType = this.$route.query.type;
    if (this.productType) {
      //读取此产品的数据
      this.loadPageData(1);
    }
    //加载投资排行榜
    this.loadRankData();
  },
  methods: {
    loadPageData(pageNo) {
      doGet("/product/type/list", {type: this.productType, pageNo: pageNo, pageSize: 9}).then(resp => {
        if (resp.code === 999) {
          //把服务器返回的数据,赋值给前端对象
          this.productList = resp.result.productList;
          this.pageInfo = resp.result.pageInfo;
        }
      })
    },
    //投资排行榜
    loadRankData() {
      doGet("/bid/rank").then(resp => {
        if (resp.code === 999){
        this.rankList = resp.result;
        }
      })
    },

    goLink(path,param){
      this.$router.push({
        path:path,
        query:param,
      })
    },
    //首页.
    firstPage() {
      if (this.pageInfo.pageNo <= 1) {
        alert("已经到了首页");
      } else {
        this.loadPageData(1);
      }
    },

    //下一页
    nextPage() {
      if (this.pageInfo.pageNo >= this.pageInfo.totalPage) {
        alert("已经到了页尾");
      } else {
        this.loadPageData(this.pageInfo.pageNo + 1);
      }
    },


    //上一页
    prePage() {
      if (this.pageInfo.pageNo <= 1) {
        alert("已经到了首页");
      } else {
        this.loadPageData(this.pageInfo.pageNo - 1);
      }
    },

    //尾页.
    lastPage() {
      if (this.pageInfo.pageNo >= this.totalPage) {
        alert("已经到了页尾");
      } else {
        this.loadPageData(this.pageInfo.totalPage);
      }
    }
  }
}
</script>

<style scoped>

</style>